<template>
	<view class="container">
		<view class="queryForm">
			<uni-forms ref="queryRef" :model="queryParams" label-width="70px" label-align="right">
				<uni-forms-item label="菜单名称">
					<uni-easyinput v-model="queryParams.menuName" placeholder="请输入菜单名称" />
				</uni-forms-item>
				<uni-forms-item label="状态" name="status">
					<xy-select v-model="queryParams.status" :data="sys_normal_disable" clearable />
				</uni-forms-item>
				<uni-forms-item label="父菜单">
					<xy-drawer-tree-select :data="menuTree" v-model="queryParams.parentId" value-name="menuId"
						label-name="menuName" @change="handleQuery()" />
				</uni-forms-item>
				<uni-forms-item label="操作">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleQuery()">搜索</button>
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="resetQuery()">重置</button>
					<button class="mini-btn xy-btn" type="default" size="mini" @click="handleAdd()"
						v-if="proxy.$auth.hasPermi('system:menu:add')">添加</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<!-- @iconClick="iconClick" -->
		<view v-for="(item,index) in menuList" :key="index">
			<uni-card>
				<view class="uni-body">
					<view>
						<text>菜单名称：</text>
						<text>{{ item.menuName }}</text>
					</view>
					<view>
						<text>图标：</text>
						<svg-icon :icon="item.icon" />
					</view>
					<view>
						<text>排序：</text>
						<text>{{ item.orderNum }}</text>
					</view>
					<view>
						<text>权限标识：</text>
						<text>{{ item.perms }}</text>
					</view>
					<view>
						<text>组件路径：</text>
						<text>{{ item.component }}</text>
					</view>
					<view>
						<text>状态：</text>
						<dict-tag :options="sys_normal_disable" :value="item.status" />
					</view>
					<view>
						<text>创建时间：</text>
						<text>{{ item.createTime }}</text>
					</view>
				</view>
				<view slot="actions" class="card-actions">
					<button class="mini-btn xy-btn" type="primary" size="mini" @click="handleUpdate(item)"
						v-if="proxy.$auth.hasPermi('system:menu:edit')">编辑</button>
					<button class="mini-btn xy-btn" type="warn" size="mini" @click="handleDelete(item)"
						v-if="proxy.$auth.hasPermi('system:menu:remove')">删除</button>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
	import {
		addMenu,
		delMenu,
		getMenu,
		listMenu,
		updateMenu
	} from "@/pages_work/api/system/menu";
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance();
	const {
		sys_normal_disable
	} = proxy.useDict("sys_normal_disable");

	/** 查询菜单列表所需的参数 */
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		parentId: 0,
	});

	/** 菜单列表 */
	const menuList = ref([]);

	/** 菜单树 */
	const menuTree = ref([]);

	/** 查询菜单列表 */
	const getList = () => {
		listMenu(queryParams.value).then(res => {
			menuList.value = res.data.filter(item => item.parentId == queryParams.value.parentId)
			res.data.push({menuId: 0, menuName: '顶层菜单', parentId: null})
			menuTree.value = proxy.handleTree(res.data, 'menuId')
		})
	}

	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		getList();
	};

	/** 重置按钮操作 */
	function resetQuery() {
		// dateRange.value = [];
		proxy.resetForm("queryRef");
		queryParams.value = {
			pageNum: 1,
			pageSize: 10,
			parentId: 0,
		};
		handleQuery();
	};

	/** 添加菜单信息 */
	const handleAdd = () => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=添加菜单&menuId=");
	}

	/** 编辑菜单信息 */
	const handleUpdate = (row) => {
		uni.$once('update', function(){
			handleQuery()
		})
		proxy.$tab.navigateTo("form?title=编辑菜单&menuId=" + row.menuId);
	}

	/** 删除按钮操作 */
	const handleDelete = (row) => {
		const ids = row.menuId;
		proxy.$modal.confirm('是否确认删除菜单编号为"' + ids + '"的数据项？').then(function() {
			return delMenu(ids);
		}).then(() => {
			handleQuery();
			proxy.$modal.msgSuccess("删除成功");
		}).catch(() => {});
	};

	/** 生命周期函数--下拉刷新 */
	onPullDownRefresh(() => {
		handleQuery()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000)
	})

	handleQuery();
</script>

<style lang="scss">
	@import "@/static/scss/work/index.scss";
</style>